<template>
  <div>
    <div class="CategoryList">
      <qing-nav-bar title="商品分类"></qing-nav-bar>
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="线上销售" color="#07c160">
          <!-- 列表的布局 -->
          <div id="list-div">
            <van-pull-refresh
              v-model="isRefresh"
              @refresh="onRefresh"
              success-text="刷新成功"
            >
              <van-list
                :finished="finished"
                v-model="loading"
                @load="onLoad"
                loading-text="加载中..."
                :immediate-check="false"
              >
                <div
                  class="list-item"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="goGoodsInfo(item, 'normal')"
                >
                  <div class="list-item-image">
                    <van-image
                      width="100"
                      height="100"
                      :src="item.IMAGE1"
                      :error-icon="errorImage"
                    />
                  </div>
                  <div class="list-item-txt">
                    <div class="name">
                      {{ item.NAME }}
                    </div>
                    <div class="price">
                      {{ item.ORI_PRICE | moneyFilter }} 元
                    </div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
        <van-tab title="文创专区">
          <!-- 列表的布局 -->
          <div id="list-div">
            <van-pull-refresh
              v-model="isRefresh"
              @refresh="onRefresh"
              success-text="刷新成功"
            >
              <van-list
                :finished="finished"
                v-model="loading"
                @load="onLoad"
                loading-text="加载中..."
                :immediate-check="false"
              >
                <div
                  class="list-item"
                  v-for="(item, index) in culturalList"
                  :key="index"
                  @click="goGoodsInfo(item, 'cultural')"
                >
                  <div class="list-item-image">
                    <van-image
                      width="100"
                      height="100"
                      :src="item.IMAGE1"
                      :error-icon="errorImage"
                    />
                  </div>
                  <div class="list-item-txt">
                    <div class="name">
                      {{ item.NAME }}
                    </div>
                    <div class="price">
                      {{ item.ORI_PRICE | moneyFilter }} 元
                    </div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  getGoodsListByCategorySubID,
  getAllCulturalGoodsInfo,
} from '@/api/api.config.js'
import { toMoney } from '@/filter/moneyFilter.js'
import QingNavBar from '@/components/component/qingNavBar'
export default {
  name: 'categoryList',
  components: {
    QingNavBar
  },
  created() {
    this.getGoodList()
  },
  data() {
    return {
      active: 0,
      loading: false,
      finished: false,
      list: [],
      culturalList: [],
      isRefresh: false,
      categorySubId: '',
      page: 1, // 数据页数
      culturePage: 1, // 数据页数
      errorImage: require('@/assets/images/errorimg.png'), // 失效图片
    }
  },
  mounted() {
    // 让大类能够撑满屏幕；document.documentElement -> 是html标签
    this.$nextTick(() => {
      let windowHeight = document.documentElement.clientHeight
      document.getElementById('list-div').style.height =
        windowHeight - 90 - 50 + 'px'
    })
  },
  filters: {
    moneyFilter(money) {
      return toMoney(money)
    },
  },
  methods: {
    // 加载数据
    async onLoad() {
      this.getGoodList()
      this.getAllCulturalGoodsList()
    },
    async getGoodList() {
      try {
        const res = await getGoodsListByCategorySubID(this.page)
        // res.data.message.length的长度必须是大于0的
        if (res.data.code === 200 && res.data.message.length > 0) {
          this.list = this.list.concat(res.data.message)
          this.page++
        } else {
          this.finished = true
          // this.$toast.fail('没有更多商品了') // 这个提示感觉不太好
        }
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    async getAllCulturalGoodsList() {
      try {
        const res = await getAllCulturalGoodsInfo(this.culturePage)
        // res.data.message.length的长度必须是大于0的
        if (res.data.code === 200 && res.data.message.length > 0) {
          this.culturalList = this.culturalList.concat(res.data.message)
          this.culturePage++
        } else {
          this.finished = true
          // this.$toast.fail('没有更多商品了') // 这个提示感觉不太好
        }
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    onClick (name, title) {
      if (name === 0) {
        // 清空数组 页码变为初始值
        this.list = []
        this.page = 1
        this.getGoodList()
      } else if (name === 1) {
        this.culturalList = []
        this.culturePage = 1
        this.getAllCulturalGoodsList()
      }
    },  
    // 下拉刷新
    onRefresh() {
      // 清空商品列表 页码归1 重新调接口
      // isRefresh - false 刷新成功
      this.isRefresh = false
      this.list = []
      this.page = 1
      this.onLoad()
    },
    // 前往商品的详情页面
    goGoodsInfo(item, type) {
      this.$router.push({
        name: 'Goods',
        params: { goodsId: item._id, type: type },
      })
    },
  },
}
</script>

<style scoped lang="less">
.CategoryList {
  height: 667px;
  overflow: scroll;
}
.van-nav-bar {
  background-color: #07c160;
  margin-bottom: 10px;
  ::v-deep .van-nav-bar__title {
    color: white;
    font-weight: 700;
  }
}
.van-tabs {
  height: 100%;
  margin-top: 46px;
}
:deep(.van-tabs__wrap) {
  height: 40px;
  font-size: 18px;
}
#leftNav {
  background-color: #f1f8ff;
}
#leftNav ul li {
  /* padding: 3px; */
  line-height: 50px;
  font-size: 16px;
  text-align: center;
}
.categoryActive {
  background-color: #fff;
}
#list-div {
  overflow: scroll;
  margin-top: 10px;
}
.van-list {
  background-color: #f5f7f9;
}
.list-item {
  display: flex;
  align-items: center;
  line-height: 25px;
  padding: 0 10px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  margin-top: 10px;
}
.list-item:first-child {
  margin-top: 0;
}
.list-item-image {
  flex: 8;
}
.list-item-image img {
  width: 80px;
  height: 80px;
}
.list-item-txt {
  flex: 16;
  margin-top: 10px;
  margin-left: 10px;
}
.van-image {
  margin-top: 6px;
}
.cart {
  font-size: 20px;
  color: black;
}
</style>
